<!-- campo dentro formulario -->
<div class="crudField crud_text">
	<label for="intermediario"> Intermediario </label>
	<select id="intermediario" name="object.intermediario.id">
		<option value="">&{'crud.none'}</option> 
		#{list items:_intermediarios,	as:'intermediario'}
			<option value="${intermediario.id}" #{if (_field!=null && _field.intermediario!=null && intermediario.id.equals(_field.intermediario.id))} selected #{/if}>
			${intermediario}
			</option>
		#{/list}
	</select>  
	<img id="searchIntermediario" src="/public/images/Add.png" alt="Add">
</div>

<!-- dialogo para busqueda de entidad -->
<div id="dialog-search-intermediarios"  style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Intermediario'}
		<input type="text" id="intermediarioSearch" name="intermediarioSearch">
		<img id="addIntermediario" src="/public/images/Add.png" alt="Add">
		</h2>
		<div class="objectForm">
			<div class="crudField crud_text" id="intermediariosDiv">
				<table id="tipoeventosTable">			
					#{list items:_intermediarios, as:'intermediario'}				
						<tr><td><a href="#" onclick='selectAndCloseIntermediarioDialogs("${intermediario.id}");' class="intermediario" >${intermediario}</a></td></tr>
					#{/list}
				</table>
			</div>
		</div>	
</div> 

<!-- dialogo para alta de nueva entidad -->
<div id="dialog-add-intermediario"  class="dialogIntermediario" style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Intermediario'}
		</h2>
		<div id="nuevoContactoError"></div>
		<div class="objectForm">
			<div class="crudField crud_text">
				<label for = "razonSocialNuevoIntermediario">Razon Social</label><input type="text" id="razonSocialNuevoIntermediario" name="razonSocialNuevoIntermediario" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "tratamientoNuevoContacto">Tratamiento</label><input type="text" id="tratamientoNuevoContacto" name="tratamientoNuevoContacto" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "nombreNuevoIntermediario">Nombre</label><input type="text" id="nombreNuevoIntermediario" name="nombreNuevoIntermediario" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "apellidoNuevoIntermediario">Apellido</label><input type="text" id="apellidoNuevoIntermediario" name="apellidoNuevoIntermediario" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "marcaComercialNuevoIntermediario">Marca Comercial</label><input type="text" id="marcaComercialNuevoIntermediario" name="marcaComercialNuevoIntermediario" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "emailNuevoIntermediario">Email</label><input type="text" id="emailNuevoIntermediario" name="emailNuevoIntermediario" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "telefonoNuevoIntermediario">Telefono</label><input type="text" id="telefonoNuevoIntermediario" name="telefonoNuevoIntermediario" value="">
			</div>
			<input type="button" value="Save" onclick="saveIntermediario();">
		</div>				
</div>

<script type="text/javascript">

$().ready(function() {
	
	$( "#dialog-search-intermediarios").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#dialog-add-intermediario").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#searchIntermediario" ).click(function() {
		$( "#dialog-search-intermediarios" ).dialog( "open" );
		return false;
	});
	$( "#addIntermediario" ).click(function() {
		$( "#dialog-add-intermediario" ).dialog( "open" );
		return false;
	});
	
	$("#intermediarioSearch").keyup(function() {
		  searchIntermediarios();
	});
});

/* esta funcion busca las entidades segun el criterio de busqueda */
function searchIntermediarios(){
	$.get("/Organizaciones/search",  {
		organizacionId: '${_organizacion}',
		nombre: $("#intermediarioSearch").val()
	},function(data, id){
		if(data[0] != 'ERROR'){
			$("#tipoeventosTable").remove();
			var intermediarios = JSON.parse(data[1]);
			var i = 0;
			html = "<table id='tipoeventosTable'>";
			for(i = 0; i < intermediarios.length; i++) {
				html = html + 
				'<tr><td><a href="#" onclick="selectAndCloseIntermediarioDialogs('+intermediarios[i].id+');" class="intermediario" >'+
				intermediarios[i].razonSocial + ' ' + intermediarios[i].nombre + ' ' + intermediarios[i].apellido+ ' ' + intermediarios[i].marcaComercial +
				'</a></td></tr>';				
			}
			html = html + "</table>";
			$("#intermediariosDiv").append(html);
			return false;
		} else {
			return false;
		}
		
	},'json');
}

/* esta funcion guarda la nueva entidad en la base de datos y la setea en el campo del formulario */
function saveIntermediario() {
	tratamiento = $("#tratamientoNuevoContacto").val();
	razonSocial = $("#razonSocialNuevoIntermediario").val();
	nombre = $("#nombreNuevoIntermediario").val();
	apellido = $("#apellidoNuevoIntermediario").val();
	marcaComercial = $("#marcaComercialNuevoIntermediario").val();
	email = $("#emailNuevoIntermediario").val();
	telefono = $("#telefonoNuevoIntermediario").val();
	
	$.get("/Organizaciones/newIntermediario",  {
		id: '${_organizacion}',
		tratamiento: tratamiento,
		razonSocial: razonSocial, 
		nombre: nombre,
		apellido: apellido,
		marcaComercial: marcaComercial,	
		telefono: telefono, 
		email:email
	},function(data){
		if(data[0] != 'ERROR'){
			saveAndCloseIntermediarioDialogs(data[1], data[2]);
		}else {
			alert(data[1]);
		}
		
	},'json');
	
}

/* esta funcion agrega el nuevo campo en el formulario y cierra los dialogs */
function saveAndCloseIntermediarioDialogs(id, valor){
	
	$("#intermediario").append('<option value=' + id + ' selected>' + valor +'</option>');
	
	closeIntermediarioDialogs();
}

/* esta funcion setea el campo seleccionado en el formulario y cierra los dialogs */
function selectAndCloseIntermediarioDialogs(id){
			
	$("#intermediario option[value='"+id+"']").prop('selected', true);
	
	closeIntermediarioDialogs();
}

function closeIntermediarioDialogs(){
	$('#intermediarioSearch').val("");
	$('#intermediario_nombre').val("");
	$("#dialog-add-intermediario").dialog( "close" );
	$("#dialog-search-intermediarios").dialog( "close" );
}
</script>